<template>
  <div class="admin">
    <el-container>
      <el-aside width="200">
        <adminHeader></adminHeader>
      </el-aside>
      <el-main>
        <el-page-header content="用户管理"></el-page-header>

        <div>
          <el-table v-loading="loading" :data="users"   show-overflow-tooltip style="background-image: linear-gradient(#ffffff, #f2f6fc);">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="邮箱：">
                    <span>{{props.row.email == null || props.row.email === '' ?'---':props.row.email}}</span>
                  </el-form-item>
                  <el-form-item label="电话：">
                    <span>{{props.row.phone == null || props.row.phone === ''?'---':props.row.phone}}</span>
                  </el-form-item>
                  <el-form-item label="地址：">
                    <span>{{props.row.address == null || props.row.address === ''?'---':props.row.address}}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column label="用户名" prop="username" align="center"></el-table-column>
            <el-table-column label="姓名" prop="name" align="center"></el-table-column>
            <el-table-column label="邮箱" prop="email" align="center"></el-table-column>
            <el-table-column label="电话" prop="phone" align="center"></el-table-column>
            <el-table-column label="操作" fixed="right" align="center">
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-phone-outline" circle @click="contect(scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import adminHeader from "../../components/adminHeader";
export default {
  components: {adminHeader},
  data() {
    return {
      users:[],
      loading:false,
      height:document.documentElement.clientHeight-120
    };
  },
  mounted() {
    this.getUser();
  },
  methods: {
    getUser(){
      this.loading = true;
      this.axios.get('/api/admin/getUser').then(res=>{
        console.log(res.data);
        this.users = res.data;
        this.loading = false
      }).catch(err=>{
        console.log(err)
      })
    },
    contect(row){
      console.log(row);
      if (row.phone){
        window.location.href = 'tel://'+ row.phone;
      }

    },
  },
};
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 80px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
/deep/ .el-main{
  margin-top: 10px;
}
</style>
